<template>
	<view class="container">
		<cu-custom bgColor="bg-blue" :isBack="false">
			<block slot="backText"></block>
			<block slot="content">账号审核中</block>
		</cu-custom>

		<unifab @dragClick="gohome" creatTop="60" creatLeft="85" image="../../static/home.png" imageWidth="60upx"></unifab>
		<view class="bg-top bg-blue">
			<view class="center-box shadow">
				<view class="cu-list menu">
					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view style="margin-left: 0rpx;" class="action sub-title">
							<text class="text-xl text-bold text-blue text-shadow">基本信息</text>
							<text class="text-ABC text-blue">BASE</text>
						</view>
						
						<view style="margin-left: 0rpx;width: 240rpx;margin-right: 0rpx;" class="action title">
							<text :class="'bg-blue'" class="cu-tag margin-right-xs light radius">
								所属企业：{{QrcodeUserEntity.CustomerName}}
							</text>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view style="flex: 0.6 !important;" class="content">
							<text class="text-lg">状态</text>
						</view>
						<view style="margin-left: 0rpx;width: 100rpx;margin-right: 0rpx;flex: 1;" class="action title">
							<text :class="'bg-orange'" class="cu-tag margin-right-xs light radius">
								审核中
							</text>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view style="flex: 0.6 !important;" class="content">
							<text class='text-lg'>账号登录名</text>
						</view>
						<view style="flex:1;" class="action">
							<input class="uni-input"  placeholder="请输入账号登录名" v-model="QrcodeUserEntity.Name" />
						</view>
					</view>
					
					<view class="cu-item" style="padding: 0;">
						<view style="flex: 0.6 !important;" class="content">
							<text class='text-lg'>账号密码</text>
						</view>
						<view style="flex:1;" class="action">
							<input class="uni-input" password  type="safe-password" placeholder="请输入账号密码" v-model="QrcodeUserEntity.Password" />
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view style="flex: 0.6 !important;" class="content">
							<text class="text-lg">昵称</text>
						</view>
						<view style="flex:1;" class="action">
							<input class="uni-input"  placeholder="请输入昵称" v-model="QrcodeUserEntity.RealName" />
						</view>
					</view>
					<!-- <view class="cu-item" style="padding: 0;">
						<view style="flex: 0.6 !important;" class="content">
							<text class='text-lg'>手机号</text>
						</view>
						<view style="flex:1;" class="action">
							<input  class="uni-input" type="number"  placeholder="请输入手机号"   v-model="QrcodeUserEntity.Phone" />
						</view>
					</view> -->
					<view class="cu-item" style="padding: 0;">
						<view style="flex: 0.6 !important;" class="content">
							<text class='text-lg'>手机号</text>
						</view>
						<view style="flex:1;" class="action phoneflex">
							
							<view v-if='QrcodeUserEntity.Phone' class="phoneInput">
								<input disabled class="uni-input" v-model="QrcodeUserEntity.Phone" />
							</view>
							
							<view class="getNumberBut" v-if="!QrcodeUserEntity.Phone">
								<button class="getPhoneNumberBtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">点击获取</button>
							</view>
							
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view style="flex: 0.6 !important;" class="content">
							<text class="text-lg">注册日期</text>
						</view>
						<view style="flex:1;" class="action">
							<input disabled class="uni-input" type="number" v-model="QrcodeUserEntity.AddTime" />
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 160rpx;">
				
			</view>
			<view class="publish-goods-wrap">
				<view class="publish-goods-btn" @click="UpdateQrcode">更新我的信息</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/request.js';
	import unifab from "@/components/beyondGod-drag/beyoundGod-drag.vue";	
	export default {
		components:{
			unifab
		},
		data() {
			return {
				QrcodeUserEntity:{
					Id:'',
					CustomerName:'',
					RealName:'',
					Name:'',
					Phone:'',
					Password:'',
					AddTime:''
				}
			}
		},
		onLoad() {
			this.getSessionKey()
			this.GetUserData();
		},
		methods: {
			gohome(){
				setTimeout(() => {
				      uni.reLaunch({
				      	url: '/pages/qrcode/login?me=1'
				      });
				}, 1000)
			},
			GetUserData(){
				let that=this
				uni.showLoading({
					title: '加载中'
				})
				//加载人员数据
				let opts = {
					url: 'SpareApi/GetVerifyUserData',
					method: 'get'
				};
				request.httpTokenRequest(opts).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						console.log(JSON.stringify(res.data.data.user))
						that.QrcodeUserEntity=res.data.data;
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});	
			},
			UpdateQrcode(){
				var that = this;
				uni.showLoading({
					title: '更新中'
				})
				let opts = {
					url: 'SpareApi/UpdateVerifyUserData',
					method: 'post'
				};
				request.httpTokenRequest(opts,that.QrcodeUserEntity).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						uni.showToast({ title: '更新成功', icon: 'success', duration: 3000 });
						this.GetUserData();
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'error', duration: 5000 });
					}
				});
			},
			getSessionKey(){
				let that=this
				//再拿一次code
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						
						let data={
							code:loginRes.code
						}
						let opts = {
							url: 'api/GetSessionKeyByCode',
							method: 'get'
						};
						request.httpRequest(opts,data).then(res => {
							console.log("123131321312",res)
							that.session_key=res.data.msg
						});
					}
				});
			},
			getPhoneNumber (e) {
			    console.log(e.detail.code)  // 动态令牌
			    console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
			    console.log(e.detail.errno)  // 错误码（失败时返回）
				
				let that = this
				if(e.detail.errMsg == 'getPhoneNumber:ok') {
					const accountInfo = uni.getAccountInfoSync(); //获取appid
					console.log('000000', accountInfo.miniProgram.appId);
					console.log('12321', e)
					let encryptedData = e.detail.encryptedData;
					let iv = e.detail.iv;
					
					console.log('0001',encryptedData)
					console.log('0002',iv)
					const WXBizDataCrypt = require('@/common/WXBizDataCrypt.js')
					let pc = new WXBizDataCrypt(accountInfo.miniProgram.appId, that.session_key)
					let data = pc.decryptData(encryptedData, iv);
					console.log('手机号码:', data.purePhoneNumber);
					that.QrcodeUserEntity.Phone = data.purePhoneNumber
				} else {
					uni.showToast({
						title: '获取用户手机号失败',
						duration: 3000,
						icon: 'none'
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		width: 750rpx;
		color: #333333;

		.bg-top {
			margin-top: -1rpx;
			width: 750rpx;
			height: 220rpx;
			padding-top: 50rpx;
			border-radius: 0 0 20% 20%;

			.top-box {
				width: 700rpx;
				background-color: #FFFFFF;
				margin: 0 auto;
				border-radius: 20rpx;
				padding: 20rpx 30rpx 0rpx;
				position: relative;

				.qh-pic {
					position: absolute;
					right: 64rpx;
					top: -50rpx;
					border-radius: 12rpx;
				}

				.qh-title {
					width: 100%;
					height: 60rpx;
					line-height: 65rpx;
					padding-right: 190rpx;
				}

				.bxBox {
					position: relative;
					display: flex;
					/* padding: 0 30rpx; */
					min-height: 100rpx;
					/* background-color: #ffffff; */
					/* justify-content: space-between; */
					align-items: center;
					font-size: 30rpx;
					line-height: 1.6em;
					flex: 1;

					.bxImg {
						display: inline-block;
						margin-right: 10rpx;
						width: 1.6em;
						text-align: center;
					}
				}

			}
		}

		.center-box {
			color: #333333;
			width: 700rpx;
			background-color: #FFFFFF;
			margin: 0 auto;
			border-radius: 20rpx;
			padding: 0rpx 30rpx 0rpx;
			position: relative;
			margin-top: 20rpx;
		}
	}
	
	.publish-goods-wrap {
		background: rgba(255, 255, 255, .5);
		padding: 24rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
	.publish-goods-btn {
		margin: 24rpx;
		background: #0079FE;
		color: #FFFFFF;
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 82rpx;
	}
	
	.action{
		text-align: right;
	}
</style>
